<template>
  <div class="overview-tabs">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="first">
        <div slot="label" class="tab-label">总览</div>
        <overview />
      </el-tab-pane>
      <el-tab-pane name="second">
        <div slot="label" class="tab-label">租赁</div>
        <lease />
      </el-tab-pane>
      <el-tab-pane name="third">
        <div slot="label" class="tab-label">出租管理</div>
        <rental />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import overview from './overview'
import lease from './lease'
import rental from './rental'
export default {
  components: { overview, lease, rental },
  data() {
    return {
      activeName: 'first'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss">
.overview-tabs {
  .el-tabs {
    .el-tabs__nav-wrap::after {
      height: 1px;
    }
  }

  .el-tabs__content {
    padding: 17px;
  }
}
</style>

<style lang="scss" scoped>
.overview-tabs {
  padding: 10px;
}

.tab-label {
  width: 76px;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
}
</style>
